{include file="public/header" /}
<style>
    .detail-mdl-spec .rdoAct {
        border: 1px solid #16b777;
    }
</style>
<body class="hide-top bgc">
<div class="detail-hd flex-center" >
<!--    <input type="hidden" name="spec_value_id" id="spec_value_id" value="">-->
    <i class="layui-icon layui-icon-left"></i>
    <ul>
        <li class="active pro" data-id="pro">
            <div>商品</div>
            <p></p>
        </li>
        <li class="det" data-id="spec">
            <div>详情</div>
            <p></p>
        </li>
    </ul>
</div>
<div class="detail-swiepr" id="pro">
    <div class="swiper">
        <div class="swiper-container carousel">
            <div class="swiper-wrapper">
                {foreach name="$info.images" item="vo"}
                <div class="swiper-slide" data-id="1">
                    <img src="{$vo}" alt=""/>
                </div>
                {/foreach}
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <i class="layui-icon layui-icon-left"></i>
</div>

<div class="detail-news">
    <div class="price">
        <p>￥<span id="vip_price">{$info.vip_price}</span></p>
        <p class="old" id="price">￥{$info.price}</p>
    </div>
    <p>{$info.title}</p>
    <p class="flex-layout">销量{$info.sales} <span>库存{$info.stock}</span></p>
</div>
<!--<div class="layui-form">-->
<!--    <ul class="detail-spec-form" style="height: 100px">-->
<!--        <li class="">-->
<!--            <p>规格</p>-->
<!--            {foreach name="$info.SpecData" item="vo"}-->
<!--                <p>{$vo.spec_name}</p>-->
<!--                {foreach name="$vo.child" item="v"}-->
<!--                    <input type="radio" title="{$v.title}" name="{$vo.id}" value="{$v.id}" lay-filter="demo-radio-filter" >-->
<!--                    <li data-id="1" onclick="guige(0,0)">123</li>-->
<!--                {/foreach}-->
<!--            {/foreach}-->
<!--        </li>-->

<!--    </ul>-->
<!--</div>-->


<div class="detail-title flex-center" id="spec">
    <span></span>商品详情 <span></span>
</div>
<div class="detail-txt">{:htmlspecialchars_decode($info['content'])}</div>

<div class="detail-footer flex-layout">
    <div onclick="load_href('{:url(\'cart/index\')}',2)">
        <img src="/static/index/img/icon51.png" alt="">
        <p>购物车</p>
        {if $count > 0}<span>{$count}</span>{/if}
    </div>
    <ul>
        <li>
            <img src="/static/index/img/icon52.png" alt="">
            <p>加入购物车</p>
        </li>
        <li>
            <img src="/static/index/img/icon53.png" alt="">
            <p>立即购买</p>
        </li>
    </ul>
</div>

<div class="model">
    <div class="detail-mdl">
        <div class="detail-mdl-pro">
            <p class="flex-center">
                <img id="newly_image" src="{$info.icon}" alt="">
            </p>
            <div class="rgt">
                <p class="price">￥<span id="newly_price">{$info.vip_price}</span></p>
                <p>库存 {$info.stock}</p>
                <img src="/static/index/img/icon54.png" class="cancel" alt="">
            </div>
        </div>

        <ul class="detail-mdl-spec">
            {foreach name="$info.SpecData" item="vo"  key='k'}
            <li>
                <p>{$vo.spec_name}</p>
                <ul class="specList">
                    {foreach name="$vo.child" key = "k" item="v"}
                    <li {if $k == 0}class="rdoAct"{/if}>
                    <label>
                        {$v.title}
                        <input type="radio" class="spec" value="{$v.id}"/>
                    </label>
                    </li>
                    {/foreach}
                </ul>
            </li>
            {/foreach}
        </ul>

<!--        <div class="guige">-->
<!--            <p>规格</p>-->
<!--            {foreach name="$info.SpecData" item="vo"  key='k'}-->
<!--            <div class="li">-->
<!--                <h2>{$vo.spec_name}</h2>-->
<!--                <ul>-->
<!--                    {foreach name="$vo.child" key='key' item="v"}-->
<!--                    <li  {if $key == 0}class="moren"{/if} data-id="{$v.id}" onclick="guige({$k},{$key})" >{$v.title}</li>-->
<!--                    {/foreach}-->
<!--                </ul>-->
<!--            </div>-->
<!--            {/foreach}-->

<!--        </div>-->
        <input type="hidden" id="spec_value_id" value=""/>
        <div class="model-mdl-stepper flex-layout">数量
            <div>
                <p class="minus">-</p>
                <input type="number" value="1" id="num" readonly>
                <p class="add">+</p>
            </div>
        </div>
        <ul class="model-mdl-btn">
            <li data-type="1" class="buy">
                <img src="/static/index/img/icon52.png" alt="">
                <p>加入购物车</p>
            </li>
            <li data-type="2" class="buy">
                <img src="/static/index/img/icon53.png" alt="">
                <p>立即购买</p>
            </li>
        </ul>
    </div>
</div>
</body>
{include file="public/footer"/}
<script src="/static/index/js/swiper-bundle.js"></script>
<script>


    $('.detail-footer li').click(function() {
        //默认规格查询
        let spec_array = [];
        $('.rdoAct label').each((index,item)=>{
            spec_array.push($(item).children('input').val())
        });
        spec_item_ids = spec_array.join('-');
        get_spec_price('{$info.id}', spec_item_ids);
        $('.model').show()
    });

    //切换规格
    $(".spec").click(function () {
        $(this).parent().parent().addClass('rdoAct');
        $(this).attr('checked', true);
        $(this).parent().parent().siblings().removeClass('rdoAct');
        $(this).parent().parent().siblings().children().children().attr('checked', false);

        let spec_array = [];
        $('.rdoAct label').each((index,item)=>{
            spec_array.push($(item).children('input').val())
        });
        spec_item_ids = spec_array.join('-');
        get_spec_price('{$info.id}', spec_item_ids);
    });

    function get_spec_price(id, spec_item_ids) {
        if (!id || !spec_item_ids) {
            return false;
        }
        var load = layer.load(2);
        $.ajax({
            type: 'GET',
            url: '{:url("product/getProductSpec")}',
            data: {pid: id, sku_id: spec_item_ids},
            dataType: "json",
            success: function (data) {
                layer.close(load);
                if (data.code === 1) {
                    $("#newly_image").attr('src', data.data.icon);
                    $("#newly_price").text(data.data.vip_price);
                    $('#spec_value_id').val(data.data.id);
                } else {
                    layer.msg(data.msg);
                }
            }
        });
    }
    // var data = [];
    // function guige(k,id){
    //     $(".guige").children('div').eq(k).find('ul').children('li').removeClass('moren');
    //     $(".guige").children('div').eq(k).find('ul').children('li').eq(id).addClass('moren');
    //     var ids = $(".guige").children('div').eq(k).find('ul').children('li').eq(id).data('id');
    //     data[k]=ids;
    //     if(data[0]!=undefined)
    //     {
    //         var idlist = data.join('-');
    //     }else {
    //         var idlist = ids;
    //     }
    //
    //     console.log(idlist)
    //     $.ajax({
    //         type: 'GET',
    //         url: '{:url("product/getProductSpec")}',
    //         data: {pid:'{$info.id}',sku_id: idlist},
    //         dataType: "json",
    //             success: function (data) {
    //                 if(data.code==1)
    //                 {
    //                     spec_value_id = data.data.id
    //                     document.getElementById('price').innerHTML= data.data.price;
    //                     document.getElementById('vip_price').innerHTML= data.data.vip_price;
    //                 }
    //             }
    //     });
    // }

    $(function () {
        const ly = layer, a = $, b = a(".buy"), m = a('.minus'), d = a('.add'),
            api = {addCart: '{:url("cart/spec_add")}', buy: '{:url("product/submit")}'};

        m.click(function () {
            const t = a(this), n = t.next(), v = parseInt(n.val());
            v > 1 ? n.val(v > 1 ? v - 1 : 1) : '';
        });
        d.click(function () {
            var t = a(this), n = t.prev(), v = parseInt(n.val());
            n.val(v + 1);
        });

        b.click(function () {
            var t = a(this).attr('data-type'), u = t === '1' ? api.addCart : api.buy, n = a("#num").val();
            return parseInt(n) > 0 ? common.request(u, {pid: '{$info.id}', num: n, type: 1, spec_value_id: $('#spec_value_id').val(),sku_id:spec_item_ids}) : ly.msg('数量错误');
        })

    })

    //静态页原始数据
    var swiper = new Swiper('.carousel', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        loop: true
    });
    $(document).ready(function () {
        $(document).scroll(function () {
            if ($(this).scrollTop() >= 560) {
                $('.det').addClass('active').siblings().removeClass('active')
            } else {
                $('.pro').addClass('active').siblings().removeClass('active')
            }
            if ($(this).scrollTop() >= 100) {
                $(".detail-hd").show()
            } else {
                $('.detail-hd').hide()
            }
        })
    })

    $('.detail-hd li').click(function () {
        $("html,body").animate({scrollTop: $('#' + $(this).data('id')).offset().top - 44 + 'px'}, 1000);
    })
    $('.cancel').click(function () {
        $('.model').hide()
    })
    $('.detail-footer li').click(function () {
        $('.model').show()
    })
    $('.det-spec').click(function () {
        $('.model').show()
    })
</script>
</html>